<template>
  <div id="home">
    <NavBar class="navbar">
      <div slot="center">购物街</div>
    </NavBar>
    <view-control 
    :titles="titles"
    @tabClick="typeClick" 
    ref="view1" 
    class="viewControl"
    v-show="isViewFixed">
    </view-control>
    <scroll class="content" ref="scroll" :srcollType="2" :pullUpLoad="true" @scroll="getScrollPositon"
      @pullingUp="loadMore">
      <home-swiper :banner="banner" @SwiperImageLoad="SwiperImageLoad"></home-swiper>
      <home-recommend :recommend="recommend"></home-recommend>
      <feature-view></feature-view>
      <view-control :titles="titles" @tabClick="typeClick" ref="view2">
      </view-control>
      <goods-list :showGoods="showGoods"></goods-list>
    </scroll>
    <back-top class="backTop" @click.native="backTop" v-show="isShow"></back-top>
  </div>
</template>

<script>
import NavBar from '@/components/common/navbar/NavBar.vue'
import HomeSwiper from "./childComponents/HomeSwiper.vue"
import HomeRecommend from './childComponents/HomeRecommend.vue'
import FeatureView from './childComponents/FeatureView.vue'
import ViewControl from '@/components/common/viewcontrol/ViewControl.vue'
import GoodsList from '@/components/content/GoodsList.vue'
import Scroll from '@/components/common/scroll/Scroll.vue'
import BackTop from '@/components/content/BackTop.vue'
import { debounce } from '@/components/common/debounce/debounce'
import { getHomeMultidata, getGoodsList } from 'network/home.js'
export default {
  name: "Home",
  computed: {
    showGoods() {
      return this.goods[this.currentType].list
    }
  },
  components: {
    NavBar,
    HomeSwiper,
    HomeRecommend,
    FeatureView,
    ViewControl,
    GoodsList,
    Scroll,
    BackTop
  },
  data() {
    return {
      banner: [],
      recommend: [],
      titles: ["流行", "新款", "精选"],
      goods: {
        "pop": { page: 0, list: [] },
        "new": { page: 0, list: [] },
        "sell": { page: 0, list: [] }
      },
      currentType: "pop",
      isShow: false,
      viewOffsetTop: 0,
      isViewFixed: false,
      debounceWatch: null,
      positionY: 0
    }
  },
  created() {
    getHomeMultidata().then(res => {
      this.banner = res.data.data.banner.list
      this.recommend = res.data.data.recommend.list
    }).catch(err => {
      console.log(err)
    })
    this.getGoodsList("pop")
    this.getGoodsList("new")
    this.getGoodsList("sell")
    
  },
  methods: {
    // 网络请求方法：
    getGoodsList(type) {
      const page = this.goods[type].page + 1
      getGoodsList(type, page).then(res => {
        this.goods[type].list.push(...res.data.data.list)
        this.goods[type].page += 1
      }).catch(err => {
        console.log(err)
      })
    },
    
    // 监听组件发送的事件
    typeClick(index) {
      switch (index) {
        case 0:
          this.currentType = "pop"
          break
        case 1:
          this.currentType = "new"
          break
        case 2:
          this.currentType = "sell"
          break
      }
      this.$refs.view1.currentIndex = index
      this.$refs.view2.currentIndex = index
    },
    // 点击返回顶部事件
    backTop() {
      this.$refs.scroll.scroll.scrollTo(0, 0, 500)
    },
    // 监听滚动事件
    getScrollPositon(position) {
      // 判断backTop是否显示与隐藏
      this.isShow = (-position) > 1000
      // 判断viewcontrol是否开始吸顶
      this.isViewFixed = (-position) > this.viewOffsetTop
    },
    loadMore() {
      this.getGoodsList(this.currentType)
      this.$refs.scroll.scroll.finishPullUp()
    },
    SwiperImageLoad() {
      // 此时轮播图的图片已经加载完毕，需要获取viewcontrol的offsetTop
      this.viewOffsetTop = this.$refs.view2.$el.offsetTop
    }
  },
  deactivated() {
    this.positionY = this.$refs.scroll.getPositionY()
  },
  activated() {
    this.$refs.scroll.refresh()
    this.$refs.scroll.scroll.scrollTo(0, this.positionY, 0)
  }
}
</script>

<style scoped>

#home {
  position: relative;
  /* padding-top: 44px; */
  height: 100vh;
  /* width: 100vw; */
}

.navbar {
  /* position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10; */
  color: #fff;
  background-color: var(--color-tint);
}

.content {
  /* height: 583px; */
  position: absolute;
  overflow: hidden;
  left: 0;
  right: 0;
  top: 44px;
  bottom: 52px; 
}

.backTop {
  position: fixed;
  right: 20px;
  bottom: 65px;
}

.viewControl {
  position: relative;
  z-index: 10;
}
</style>